<template>
  <div>
    <CityHeader />
    <CitySearch :cities="cities" v-if="cities" />
    <CityList :objCity="{
      citys: citys,
      hotCities: hotCities,
      cities: cities,
    }" v-if="hotCities.length" />
    <CityAlphabet :cities="cities" v-if="cities" />
  </div>
</template>

<script>
import CityHeader from "./components/cityHeaders.vue";
import CitySearch from "./components/citySearch.vue";
import CityList from "./components/cityList.vue";
import CityAlphabet from "./components/cityAlphabet.vue";

export default {
  name: "city",
  data() {
    return {
      citys: "",      
      hotCities: [],
      cities: null,
    }
  },
  components: {
    CityHeader: CityHeader,
    CitySearch: CitySearch,
    CityList: CityList,
    CityAlphabet: CityAlphabet,
  },
  methods: {
    cityAjax() {
      this.$axios({ method: "get", url: "user/city", }).then(value => {      
        this.hotCities = value.data.data.hotCities;
        this.cities = value.data.data.cities;
        this.citys = value.data.data.city;
      })
    }
  },

  mounted() {
    this.cityAjax();
  },
  
}
</script>

<style scoped>

</style>